<template>
  <div class="box">{{ obj.a }} | {{ obj.b }} | {{ obj.c?.a }}</div>
  <div>
    <button @click="add">添加</button>
    <button @click="add2">添加2</button>
  </div>
  {{ t?.toJSON() }}测试
  {{ study?.b }}
  <div v-for="(item, index) in study?.list">
    <div>
      {{ item.b }}
      <el-button @click="() => item.add2()">添加</el-button>
    </div>
    {{ obj.c.d.a }}
  </div>
</template>
<script>
import { watch, reactive, ref } from 'vue'
import { Test2 } from './study/test.js'
import Test from './study/test.js'
let obj = ref({
  a: 1,
  b: 2,
  c: {
    a: 1,
    b: 2
  }
})
export default {
  data() {
    return {
      obj: {
        c: {
          d: obj
        }
      },
      study: null,
      t: null
    }
  },
  methods: {
    add() {
      const unwatch = watch(this.obj, () => {
        console.log(`修改了`)
        unwatch()
      })
      obj.value.a++
    },
    add2() {
      let t = new Test2()
      this.t = t
      console.log(this.t === t, 'this.t === t')
      let json = this.t.toJSON()
      console.log(json, 'json1:this.t.toJSON()')
      json = t.toJSON()
      console.log(json, 'json2:t.toJSON()')
    }
  },
  watch: {},
  mounted() {
    console.log(`helloworld`)
    this.study = new Test()
  }
}
</script>
